<template>
  <section id="ai-agent-templates-section" class="agent-templates-section">
    <div class="container">
      <header class="section-header">
        <h2 class="section-title">AI 智能体模板</h2>
        <p class="section-subtitle">
          精选多种AI智能体模板，满足不同业务场景需求，快速构建智能应用
        </p>
      </header>

      <div class="agent-controls">
        <div class="agent-filters">
          <div class="agent-categories">
            <button
              v-for="cat in categories"
              :key="cat.id"
              class="category-btn"
              :class="{ active: activeCategory === cat.id }"
              @click="setActiveCategory(cat.id)"
              :aria-pressed="activeCategory === cat.id"
            >
              {{ cat.name }}
            </button>
          </div>
        </div>

        <div class="agent-search-wrapper">
          <div class="agent-search">
            <i class="search-icon fas fa-search" aria-hidden="true"></i>
            <input
              type="text"
              placeholder="搜索Agent"
              v-model.trim="searchTerm"
              class="search-input"
              aria-label="搜索智能体模板"
            />
          </div>
        </div>
      </div>

      <div v-if="filteredAgentTemplates.length" class="agent-grid">
        <article
          v-for="template in filteredAgentTemplates"
          :key="template.id"
          class="agent-card"
          :aria-label="template.title"
          @click="goToAgentDetail(template)"
        >
          <!-- Hot图标 - 前四个智能体和智能办公助手显示 -->
        <div v-if="[1, 2, 17, 18, 5, 3].includes(template.id)" class="hot-badge">
          <img src="/img/hot3.svg" alt="Hot" class="hot-icon" />
        </div>

          <div class="card-content">
            <h3 class="card-title">{{ template.title }}</h3>

            <div class="avatar-desc-container">
              <div class="card-avatar">
                <img
                  :src="template.avatar"
                  :alt="`${template.title} 头像`"
                  loading="lazy"
                  onerror="this.src=''"
                />
              </div>
              <p class="card-desc">{{ template.description }}</p>
            </div>

            <div class="agent-tags">
              <span
                v-for="(tag, index) in template.tags.slice(0, 3)"
                :key="tag"
                class="agent-tag"
                :aria-label="`标签: ${tag}`"
              >
                {{ tag }}
              </span>
            </div>
          </div>
        </article>
      </div>

      <div v-else class="no-results">
        <i class="no-results-icon fas fa-search"></i>
        <p>未找到匹配的模板</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "AgentTemplates",
  data() {
    return {
      activeCategory: "all",
      searchTerm: "",
      originalTemplates: [
        {
          id: 1,
          title: "人工智能问答助手",
          description: "基于大模型的智能问答助手，能够理解上下文进行多轮对话，回答您的提问",
          model: "DeepSeek大模型",
          tags: ["智能问答", "多轮对话", "知识服务"],
          category: ["qa", "assistant"],
          avatar: "/img/ai-avatar.png",
          appName: "AIchat",
          status: 1
        },
        {
          id: 18,
          title: "WPS智能助手",
          description: "集成于WPS套件中的AI助手，有助于大幅提升办公效率",
          model: "深度写作模型",
          tags: ["智能问答", "AI审阅", "提取摘要","一键排版"],
          category: ["qa", "assistant"],
          avatar: "/img/wpsai.svg",
          appName: "WPSAI",
          status: 1
        },
        {
          id: 5,
          title: "智能办公助手",
          description: "解析pdf文件转换为word文件",
          model: "智能文档处理模型",
          tags: ["智能助手", "pdf", "word"],
          category: ["assistant", "service"],
          avatar: "/img/pdf_to_word.svg",
          appName: "pdfocr",
          status: 1
        },
        {
          id: 2,
          title: "行政执法检查AI助手",
          description: "基于人民银行行政执法知识库的智能助手，提供法规查询、执法指导、案例分析等专业服务",
          model: "行政执法模型",
          tags: ["行政执法", "条款核对", "知识库"],
          category: ["qa", "service"],
          avatar: "/img/avatar22.svg",
          appName: "wenti",
          status: 1
        },
        {
          id: 17,
          title: "桂小库",
          description: "基于国库行政许可知识库结合智能统计功能，打造集智能问答与业务数据智能查询统计于一体的智能助手",
          model: "国库AI模型",
          tags: ["智能客服", "智能助手", "国库业务"],
          category: ["service", "assistant"],
          avatar: "/img/boy1.gif",
          appName: "treasury_app",
          status: 1
        },
        {
          id: 3,
          title: "征信问答助手",
          description: "基于征信知识库和专业算法，提供个人信用报告解读、征信问题解答、信用提升建议和合规咨询等专业服务",
          model: "征信分析模型",
          tags: ["征信解读", "信用分析", "合规咨询"],
          category: ["service"],
          avatar: "/img/CreditReference.gif",
          appName: "CreditReference",
          status: 1
        },
        {
          id: 11,
          title: "文章综述写作助手",
          description: "基于deepseek大模型的综述写作助手，支持通过给定的论文主题与研究方向，给出富有参考性的综述文字。",
          model: "深度写作模型",
          tags: ["智能问答", "论文写作", "综述生成"],
          category: ["qa", "assistant"],
          avatar: "/img/avatar10.svg",
          appName: "article_review_writer",
          status: 1
        },
        {
          id: 14,
          title: "知识库智能客服",
          description: "基于知识库数据，提供多轮对话与针对性的问题解答，提供对应知识库数据的专业回答。",
          model: "知识库模型",
          tags: ["知识库", "专业问答", "多轮对话"],
          category: ["qa", "assistant"],
          avatar: "/img/avatar13.svg",
          appName: "knowledge_base_service",
          status: 1
        },
        {
          id: 15,
          title: "刑法修正案知识答疑",
          description: "严格基于给定的法律知识库，针对用户的问题给出专业的回答",
          model: "知识检索模型",
          tags: ["知识检索", "法律知识", "专业解答"],
          category: ["qa", "service"],
          avatar: "/img/avatar14.svg",
          appName: "criminal_law_assistant",
          status: 1
        },
        {
          id: 4,
          title: "执法检查通知书生成助手",
          description: "基于大模型技术，智能生成规范的执法检查通知书和相关法律文书，提升行政执法效率",
          model: "文书生成模型",
          tags: ["执法文书", "文书生成", "行政合规"],
          category: ["service"],
          avatar: "/img/avatar4.svg",
          appName: "AdminLawCheck",
          status: 1
        },
        {          id: 19,
          title: "Excel文档智能AI助手",
          description: "集成自然语言处理与数据分析能力，支持通过对话形式实现Excel数据的智能处理、分析和可视化",
          model: "数据分析模型",
          tags: ["Excel处理", "数据分析", "办公自动化"],
          category: ["analytics", "assistant"],
          avatar: "/img/avatar5.svg",
          appName: "MeetingMinutes",
          status: 0,
          usageCount: 0
        },
        {
          id: 16,
          title: "法律政策分析助手",
          description: "根据给定的政策文本，从上位法冲突，内部冲突，模糊内容等3个维度解析政策的合法性与可行性。",
          model: "专业解析模型",
          tags: ["专业解析", "文本分析", "建议生成"],
          category: ["analytics", "assistant"],
          avatar: "/img/avatar15.svg",
          appName: "legal_policy_analyzer",
          status: 1
        },
        {
          id: 6,
          title: "三步翻译",
          description: "能够将专业的英文学术论文转换为通俗易懂的中文科普文章",
          model: "翻译模型",
          tags: ["翻译", "学术论文", "科普转换"],
          category: ["service", "assistant"],
          avatar: "/img/avatar6.svg",
          appName: "three_step_translator",
          status: 1
        },
        {
          id: 13,
          title: "文章翻译助手",
          description: "支持简体中文或英文直译和意译或9种语言，尤其擅长将专业学术论文翻译成浅显易懂的科普文章。",
          model: "文章翻译模型",
          tags: ["文章翻译", "意译", "文章理解"],
          category: ["analytics", "assistant"],
          avatar: "/img/avatar12.svg",
          appName: "article_translation_assistant",
          status: 1
        },
        {
          id: 12,
          title: "文本润色助手",
          description: "依据给定的判断标准，对文本给出修改建议，同时支持对两条文本进行评分、对比，给出优缺点。",
          model: "智能内容创作",
          tags: ["文本润色", "内容评估", "对比分析"],
          category: ["qa", "analytics"],
          avatar: "/img/avatar11.svg",
          appName: "text_polishing_assistant",
          status: 1
        },
        {
          id: 7,
          title: "中英文互译",
          description: "能够进行中英文互译",
          model: "翻译模型",
          tags: ["翻译", "中英文", "语言转换"],
          category: ["service", "assistant"],
          avatar: "/img/avatar7.svg",
          appName: "chinese_english_translator",
          status: 1
        },
        {
          id: 8,
          title: "全书翻译",
          description: "能够将英文文档翻译为中文文档",
          model: "翻译模型",
          tags: ["翻译", "文档翻译", "英文转中文"],
          category: ["service", "analytics"],
          avatar: "/img/avatar8.svg",
          appName: "book_translator",
          status: 1
        },
        {
          id: 10,
          title: "文字排版助手",
          description: "通过使用Unicode符号和Emoji表情符号，以及合理的换行与间隔，对文字信息进行排版优化，让文字信息更易读，增强信息可记性。",
          model: "文字排版模型",
          tags: ["文字排版", "Unicode", "Emoji优化"],
          category: ["service", "analytics"],
          avatar: "/img/avatar9.svg",
          appName: "text_formatting_assistant",
          status: 1
        },
        {
          id: 9,
          title: "合同审查",
          description: "能够根据上传合同审查清单进行合同审核，包括条款风险分析、合规性检查等功能。",
          model: "合同分析模型",
          tags: ["合同审查"],
          category: ["qa", "analytics"],
          avatar: "/img/avatar16.svg",
          appName: "contract_review_assistant",
          status: 1
        }
      ],
      categories: [
        { id: "all", name: "全部" },
        { id: "assistant", name: "智能助手" },
        { id: "service", name: "智能客服" },
        { id: "qa", name: "智能问答" },
        { id: "analytics", name: "数据分析" },
      ],
    };
  },
  computed: {
    filteredAgentTemplates() {
      let filtered = this.originalTemplates;

      if (this.activeCategory !== "all") {
        filtered = filtered.filter(
          (template) => Array.isArray(template.category)
            ? template.category.includes(this.activeCategory)
            : template.category === this.activeCategory
        );
      }

      if (this.searchTerm) {
        const term = this.searchTerm.toLowerCase().trim();
        filtered = filtered.filter(
          (template) =>
            template.title.toLowerCase().includes(term) ||
            template.description.toLowerCase().includes(term) ||
            template.tags.some((tag) => tag.toLowerCase().includes(term))
        );
      }

      return filtered;
    },
  },
  methods: {
    setActiveCategory(categoryId) {
      this.activeCategory = categoryId;
    },
    goToAgentDetail(template) {
      this.$router.push({
        name: 'AIAgentIntroDetail',
        params: {
          id: template.id,
          appName: template.appName
        }
      });
    }
  },
};
</script>

<style scoped>
/* 基础样式重置 */
.agent-templates-section {
  padding: 20px 0 40px;
  background: #f9fafb;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 12px;
  line-height: 1.3;
}

.section-subtitle {
  font-size: 1rem;
  color: #718096;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* 控制栏布局 */
.agent-controls {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.agent-filters {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 200px;
}

.agent-search-wrapper {
  max-width: 300px;
  width: 100%;
}

/* 分类按钮样式 */
.agent-categories {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -5px;
}

.category-btn {
  padding: 8px 16px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  color: #4a5568;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  white-space: nowrap;
  font-size: 0.9rem;
  outline: none;
  margin: 5px;
  position: relative;
  overflow: hidden;
}

.category-btn.active,
.category-btn:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.category-btn:active {
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}

/* 搜索框样式 */
.agent-search {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 0.9rem;
  color: #2d3748;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  outline: none;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.search-input:focus {
  border-color: #6c5ce7;
  -webkit-box-shadow: 0 4px 8px rgba(108, 92, 231, 0.15);
  box-shadow: 0 4px 8px rgba(108, 92, 231, 0.15);
}

.search-icon {
  position: absolute;
  left: 15px;
  color: #a0aec0;
  font-size: 0.9rem;
}

/* 网格布局 - 自适应高度，超过两行时显示滚动条 */
.agent-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -14px;
  max-height: 760px; /* 设置稍大的最大高度，避免低版本Chrome浏览器中两行智能体时出现不必要的滚动条 */
  overflow-y: auto; /* 当内容超过max-height时显示垂直滚动条 */
  padding-right: 8px; /* 为滚动条预留空间 */
}

/* 自定义滚动条样式 */
.agent-grid::-webkit-scrollbar {
  width: 8px;
}

.agent-grid::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.agent-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.agent-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.agent-grid::after {
  content: '';
  display: table;
  clear: both;
}

/* 卡片样式 */
.agent-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: auto;
  padding: 20px;
  margin: 14px;
  width: calc(25% - 28px);
  float: left;
  position: relative;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

/* Hot徽章样式 */
.hot-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}

.hot-icon {
    width: 30px;
    height: auto;
    display: block;
    -webkit-filter: drop-shadow(0 2px 4px rgba(255, 71, 87, 0.4));
    filter: drop-shadow(0 2px 4px rgba(255, 71, 87, 0.4));
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
  }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.agent-card:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: #6c5ce7;
}

.card-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em;
}

.avatar-desc-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 16px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 100%;
}

.card-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  /*background: #f0f4ff;*/
}

.agent-card:hover .card-avatar {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.card-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
 /* object-fit: cover;*/
  display: block;
}

.card-desc {
  color: #718096;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left !important; /* 文本左对齐 - 强制生效 */
  text-indent: 2em !important; /* 首行缩进两个字符 - 强制生效 */
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  /* 低版本浏览器兼容性优化 */
  direction: ltr;
  unicode-bidi: embed;
  -webkit-text-align-last: left;
  -moz-text-align-last: left;
  text-align-last: left;
  /* 确保首行缩进在所有浏览器中生效 */
  padding-left: 0;
  margin-left: 0;
}

.agent-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: -4px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  overflow: hidden;
}

.agent-tag {
  background: #e8ecff;
  color: #4f6ac2;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-box-shadow: 0 1px 2px rgba(79, 108, 245, 0.08);
  box-shadow: 0 1px 2px rgba(79, 108, 245, 0.08);
  display: inline-block;
  margin: 4px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 130px;
  /* 低版本浏览器兼容性优化 */
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  /* 针对低版本Chrome的字体优化 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 重点修改：按照用户要求调整为12px字体大小 */
  font-size: 12px !important; /* 使用像素单位直接指定 */
  font-size-adjust: none !important;
  -webkit-font-size-adjust: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
}

/* 针对所有设备强制应用相同的字体大小 */
* .agent-tag,
:root .agent-tag,
html .agent-tag,
body .agent-tag,
.agent-templates-section .agent-tag,
.agent-grid .agent-tag,
.agent-card .agent-tag,
.agent-tags .agent-tag {
  font-size: 12px !important;
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
}

/* 确保在任何媒体查询下都保持相同的字体大小 */
@media (min-width: 0px) {
  .agent-tag {
    font-size: 12px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
  }
}

@media (min-width: 576px) {
  .agent-tag {
    font-size: 12px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
  }
}

@media (min-width: 768px) {
  .agent-tag {
    font-size: 12px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
  }
}

@media (min-width: 992px) {
  .agent-tag {
    font-size: 12px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
  }
}

@media (min-width: 1200px) {
  .agent-tag {
    font-size: 12px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
  }
}

.agent-tag:hover {
  background: #dde2ff;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(79, 108, 245, 0.12);
  box-shadow: 0 2px 4px rgba(79, 108, 245, 0.12);
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: #a0aec0;
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.no-results-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  color: #cbd5e0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .agent-card {
    width: calc(33.333% - 28px);
  }
}

@media (max-width: 992px) {
  .agent-card {
    width: calc(50% - 28px);
  }
}

@media (max-width: 768px) {
  .agent-controls {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .agent-search-wrapper {
    margin-bottom: 20px;
    max-width: none;
  }

  .agent-filters {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .agent-search-wrapper {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  .card-avatar {
    width: 80px;
    height: 80px;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-desc {
    font-size: 0.8rem;
  }

  .agent-card {
    width: calc(50% - 28px);
  }
}

@media (max-width: 576px) {
  .agent-card {
    width: calc(100% - 28px);
    float: none;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .category-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  .card-avatar {
    width: 70px;
    height: 70px;
  }

  .agent-grid {
    margin: -10px;
  }

  .agent-card {
    margin: 10px;
  }
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 低版本Chrome浏览器特殊兼容性处理 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  .agent-tag {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    max-width: 140px !important;
    transform: scale(0.95) !important;
    -webkit-transform: scale(0.95) !important;
  }
}

/* IE11和Edge兼容性 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .agent-tag {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }
}

/* Firefox兼容性 */
@-moz-document url-prefix() {
  .agent-tag {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }
}
</style>
